<script setup>
  import { RouterLink, RouterView, useRouter } from 'vue-router';
  import { reactive, computed, watch, ref, onMounted } from 'vue';
  import CardRecoIdea from '../components/CardRecoIdea.vue';
  import CardWebLog from '../components/CardWebLog.vue';
  import HTTPserver from '@/js/HTTPserver';
  import userTool from '@/js/userTool';
  import utilTool from '@/js/utilTool';
  onMounted(() => {
    HTTPserver.getRecoIdea(recoIdea);
  });

  const recoIdea = ref([]);

  const router = useRouter();
  function toViewRecoIdeaDetail() {
    router.push({ name: 'ViewRecoIdeaDetail', params: { param: ' ' } });
  }

  function delRecoIdea(sort, title, textMini, date) {
    let recoIdea = {
      sort: sort,
      title: title,
      textMini: textMini,
      date: date,
    };
    HTTPserver.delRecoIdea(recoIdea, delRecoIdeaAfter);
  }

  function delRecoIdeaAfter() {
    HTTPserver.getRecoIdea(recoIdea);
  }

  const realUser = ref({
    id: '',
    name: '访客',
    level: '0',
  });
  onMounted(() => {
    refresh();
  });
  function refresh(type) {
    if (utilTool.isEmpty(type)) {
      userTool.getUserInfo(realUser);
    } else {
      realUser.value.id = '';
      realUser.value.name = '访客';
      realUser.value.level = '0';
    }
  }
</script>

<template>
  <div>
    <!-- <div class="text_H2 margin_LT">文章随笔</div> -->
    <div class="panel_N1">
      <div class="card_special color_white" v-if="realUser.level >= 6">
        <div
          class="text_H3"
          style="width: 100%; height: 10%; padding: 1rem; cursor: pointer"
          v-on:click="toViewRecoIdeaDetail"
        >
          <img
            style="width: 1.25rem; height: 1.25rem; position: relative; bottom: -0.3rem"
            class="img"
            src="../assets/icon/添加.svg"
          />
          添加一份新随笔
        </div>
      </div>
      <CardRecoIdea
        v-for="(item, index) in recoIdea"
        :sort="item.sort"
        :title="item.title"
        :textMini="item.textMini"
        :date="item.date"
        @delRecoIdea="delRecoIdea"
      ></CardRecoIdea>
    </div>
  </div>
</template>
